<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <link rel="stylesheet" href="../styles/displayFrame.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div>
    <div class="d-flex flex-wrap">
        <div class="col-12 fb-24 mb-4">UNIS logo</div>
        <div class="col-12">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4 bg-disabled btn"><img src="./img/svgs/logomark.svg" alt=""></div>
                <div class=" ml-4">Logomark</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/unis-logo-color.svg" alt=""></div>
                <div class=" ml-4">Color</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4 bg-disabled btn"><img src="./img/svgs/unis-logo-white.svg" alt=""></div>
                <div class=" ml-4">White</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/unis-logo-black.svg" alt=""></div>
                <div class=" ml-4">Black</div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-wrap">
        <div class="col-12 fb-24 mb-4 mt-4">Opera8 Logo</div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/opera8-logo-color.svg" alt=""></div>
                <div class=" ml-4">Color</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4 bg-disabled btn"><img src="./img/svgs/opera8-logo-white.svg" alt=""></div>
                <div class=" ml-4">White</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/opera8-logo-black.svg" alt=""></div>
                <div class=" ml-4">Black</div>
            </div>
        </div>
    </div>
</div>
<div class="d-flex flex-wrap" style="margin-top: 45px;">
    <div class="col-12 fb-24 mb-4 d-flex justify-content-between "><span>Illustrations</span> <a class="btn btn-primary" href="./dist/svgs.zip" download="svgs.zip">Svgs (svgs.zip)</a></div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-1.svg" alt=""></div>
            <div class=" ml-4">ills-1.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-2.svg" alt=""></div>
            <div class=" ml-4">ills-2.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-3.svg" alt=""></div>
            <div class=" ml-4">ills-3.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-4.svg" alt=""></div>
            <div class=" ml-4">ills-4.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-5.svg" alt=""></div>
            <div class=" ml-4">ills-5.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-6.svg" alt=""></div>
            <div class=" ml-4">ills-6.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-7.svg" alt=""></div>
            <div class=" ml-4">ills-7.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-8.svg" alt=""></div>
            <div class=" ml-4">ills-8.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-9.svg" alt=""></div>
            <div class=" ml-4">ills-9.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-10.svg" alt=""></div>
            <div class=" ml-4">ills-10.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-11.svg" alt=""></div>
            <div class=" ml-4">ills-11.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-12.svg" alt=""></div>
            <div class=" ml-4">ills-12.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-13.svg" alt=""></div>
            <div class=" ml-4">ills-13.svg</div>
        </div>
    </div>
    <div class="col-2" >
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img src="./img/svgs/ills-14.svg" alt=""></div>
            <div class=" ml-4">ills-14.svg</div>
        </div>
    </div>
</div>


</body>
</html>